<template>
	<!-- 充值心愿币 -->
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"></view>  
		<!-- #endif -->
		<navbar title="充值心愿币" />
		<view class="tip">
			<image src="/static/images/mine/horn.png"></image>
			<text>商品抽奖存在概率，付费请谨慎/3件包邮（偏远地区除外）</text>
		</view>
		<view class="mains">
			<view class="maintop">
				<view class="maintop_left">心愿币余额</view>
				<view class="maintop_right">
					<image src="/static/images/mine/coin.png"></image>
					<text>{{walletInfo.balance || 0}}</text>
				</view>
			</view>
			<view class="main">
				<view class="title">选择充值金额</view>
				<view class="setmeal">
					<view class="setmeal_item" :class="{'active' : curIndex === index}" v-for="(item,index) in setmealList" :key="index" @click="selectSetmeal(item,index)">
						<view class="setmeal_item_price">￥{{item.price}}</view>
						<view class="setmeal_item_num">
							<image src="/static/images/mine/coin.png"></image>
							<text>{{item.num}}</text>
						</view>
					</view>
				</view>
				<view class="desc">充值赠送：<text>+{{send_num || 0}}</text>心愿币</view>
				<view class="title">选择充值方式</view>
				<view class="paytype">
					<view class="paytype_item" @click="payActive=0">
						<image src="/static/images/mine/checked.png" v-if="payActive === 0" class="paytype_item_check"></image>
						<image src="/static/images/mine/check.png" v-else class="paytype_item_check"></image>
						<image src="/static/images/mine/wallet.png" class="paytype_item_icon"></image>
						<text>佣金支付 <text>(佣金余额：{{commission || 0}})</text></text>
					</view>
					<view class="paytype_item" @click="payActive=2">
						<image src="/static/images/mine/checked.png" v-if="payActive === 2" class="paytype_item_check"></image>
						<image src="/static/images/mine/check.png" v-else class="paytype_item_check"></image>
						<image src="/static/images/mall/wechat.png" class="paytype_item_icon"></image>
						<text>微信支付</text>
					</view>
					<view class="paytype_item" @click="payActive=1">
						<image src="/static/images/mine/checked.png" v-if="payActive === 1" class="paytype_item_check"></image>
						<image src="/static/images/mine/check.png" v-else class="paytype_item_check"></image>
						<image src="/static/images/mall/alipay.png" class="paytype_item_icon"></image>
						<text>支付宝支付</text>
					</view>
				</view>
				<view class="agreement">
					<u-checkbox-group>
						<u-checkbox class="checkicon" @change="checkboxChange" size="30" shape="circle" v-model="isAgree" active-color="#FF1A71"></u-checkbox></u-checkbox>
					</u-checkbox-group>
					<view class="agree">
						我已阅读并同意<text @click="navAgreement()">《充值服务协议》</text>
					</view>
				</view>
				<view class="btn" @click="confirmRecharge">确认充值</view>
				<view class="title">充值说明</view>
				<view class="rules">
					<rich-text :nodes="recharge_rule"></rich-text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				walletInfo:{
					receive_price:'0',//收入
					pay_price:'0',//支出
					balance:'0'//心愿币
				},//钱包信息
				userInfo:{},
				curIndex:0,//当前选中的充值套餐
				setmealId:'',//当前选中的充值套餐id
				send_num:'',//充值赠送心愿币数量
				vip_extra_rate:'',//会员赠送费率
				setmealList:[],//充值套餐列表
				commission:'',//佣金
				payActive:0,//当前选中的支付方式 0佣金 1支付宝 2微信
				recharge_rule:'',//充值说明
				isAgree:true,//是否同意充值协议
				allowTap:true//防误触
			}
		},
		onLoad() {
			this.getMywalletindex();
			this.getMywalletrechargea();
			this.getRechargecoin();
		},
		methods:{
			//获取钱包信息
			getMywalletindex(){
				this.$api.mywalletindex().then(res=>{
					this.walletInfo = res;
				})
			},
			//获取充值说明
			getMywalletrechargea(){
				this.$api.mywalletrechargea().then(res=>{
					this.recharge_rule = res.recharge_rule;
					this.commission = res.commission;
				})
			},
			//获取列表+公告+会员额外心愿币加成比例
			getRechargecoin(){
				this.$api.rechargecoin().then(res=>{
					this.setmealList = res.recharge_list;
					this.setmealId = this.setmealList[0].id;
					this.vip_extra_rate = res.vip_extra_rate;
					this.$api.myindex().then(ures=>{
						this.userInfo = ures.user;
						if(this.userInfo.is_member == 1){
							this.send_num = Number(this.setmealList[0].send_num) + Number(this.setmealList[0].price) * Number(res.vip_extra_rate);
						}else{
							this.send_num = this.setmealList[0].send_num;
						}
					})
				})
			},
			//跳转注册协议
			navAgreement(){
				uni.navigateTo({
					url:'/pages/mine/wallet/rechargeAgreement'
				})
			},
			// 选中注册协议
			checkboxChange(e) {
				this.isAgree = e.value;
			},
			//选择充值套餐
			selectSetmeal(item,index){
				this.curIndex = index;
				this.setmealId = item.id;
				if(this.userInfo.is_member == 1){
					this.send_num = Number(item.send_num) + Number(item.price) * Number(this.vip_extra_rate);
				}else{
					this.send_num = item.send_num;
				}
			},
			//确认充值
			confirmRecharge(){
				if(this.payActive == 0 &&  Number(this.commission)<=0){
					uni.showToast({
						title:'佣金余额不足，请选择其它充值方式',
						icon:'none'
					})
					return
				}
				if(!this.isAgree){
					uni.showToast({
						title:'请阅读并同意《充值服务协议》',
						icon:"none"
					})
					return
				}
				if(!this.allowTap) return
				this.allowTap = false;
				setTimeout(()=>{
					this.allowTap = true;
				},3000)
				this.$api.mywalletrechargecoin({
					recharge_id:this.setmealId,
					pay_type:this.payActive
				}).then(res=>{
					if(this.payActive==0){
						uni.showToast({
							title:'充值成功',
							icon:'success'
						})
						setTimeout(()=>{
							this.getMywalletindex();
						},1000)
					}else{
						this.goPay(this.payActive,res);
					}
				})
			},
			//去支付
			goPay(pay_type,payInfo){
				uni.showLoading({
					title:'支付中...'
				})
				if(pay_type==2){
					uni.getProvider({
						service: 'payment',
						success: (res) => {
							if (res.provider.indexOf('wxpay') != -1) {
								uni.requestPayment({
									provider: "wxpay", 
									orderInfo: payInfo,
									success: (res) => {
										console.log('success:' + JSON.stringify(res));
										uni.hideLoading();
										uni.showToast({
											title:'充值成功',
											icon:'success'
										})
										setTimeout(()=>{
											this.getMywalletindex();
										},1000)
									},
									fail: (err) => {
										console.log('fail:' + JSON.stringify(err));
										uni.hideLoading();
										uni.showToast({
											title:'支付失败，请重试',
											icon:'none'
										})
									}
								})
							}
						}
					})
				}else if(pay_type==1){
					uni.getProvider({
						service: 'payment',
						success: (res) => {
							if (res.provider.indexOf('alipay') != -1) {
								uni.requestPayment({
									provider: "alipay", 
									orderInfo: payInfo,
									success: (res) => {
										console.log('success:' + JSON.stringify(res));
										uni.hideLoading();
										uni.showToast({
											title:'充值成功',
											icon:'success'
										})
										setTimeout(()=>{
											this.getMywalletindex();
										},1000)
									},
									fail: (err) => {
										console.log('fail:' + JSON.stringify(err));
										uni.hideLoading();
										uni.showToast({
											title:'支付失败，请重试',
											icon:'none'
										})
									}
								})
							}
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
page{
	padding: calc(var(--status-bar-height) + 100rpx) 0 30rpx;
}
.tip{
	width: 710rpx;
	height: 80rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	@include align-center;
	padding: 0 18rpx;
	margin: 20rpx;
	
	image{
		width: 33rpx;
		height: 30rpx;
	}
	text{
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #3E21F9;
		margin-left: 8rpx;
	}
}
.mains{
	width: 710rpx;
	border-radius: 20rpx;
	background-color: $white;
	margin: 20rpx;
}
.maintop{
	width: 710rpx;
	height: 100rpx;
	background: linear-gradient(-270deg, #3E21F9 0%, #811BFF 100%);
	border-radius: 20rpx 20rpx 0 0;
	padding: 0 20rpx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: #FFFFFF;
	@include between;
	
	&_left{
		font-size: 32rpx;
	}
	&_right{
		@include align-center;
		
		image{
			width: 35rpx;
			height: 35rpx;
		}
		text{
			font-size: 30rpx;
			margin-left: 10rpx;
		}
	}
}
.main{
	padding: 40rpx 20rpx;

	.title{
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
	}
	.paytype{
		
		&_item{
			@include align-center;
			margin-top: 30rpx;
			
			&_check{
				width: 30rpx;
				height: 30rpx;
			}
			&_icon{
				width: 40rpx;
				height: 40rpx;
				margin: 0 20rpx;
			}
			text{
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}
		}
	}
	.agreement{
		width: 690rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #575757;
		@include center;
		margin-top: 60rpx;
		
		.checkicon{
			width: 40rpx !important;
		}
		.agree{
			
			text{
				color: #6E04FF;
			}
		}
	}
	.btn{
		width: 560rpx;
		height: 70rpx;
		background: linear-gradient(180deg, #9D4DFF 0%, #6C00FF 100%);
		border-radius: 35rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		@include center;
		margin: 60rpx auto;
	}
	.rules{
		margin-top: 28rpx;
	}
}
.desc{
	font-size: 28rpx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: #666666;
	margin: 30rpx 0;
	
	text{
		color: #811BFF;
	}
}
.setmeal{
	margin-top: 24rpx;
	
	&_item{
		width: 210rpx;
		height: 161rpx;
		background: rgba(255, 255, 255, 0.05);
		border: 2rpx solid #E6E6E6;
		border-radius: 10rpx;
		padding: 35rpx 0;
		@include column-center;
		float: left;
		margin: 0 20rpx 20rpx 0;
		
		&:nth-child(3n){
			margin-right: 0;
		}
		&_price{
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #393939;
		}
		&_num{
			@include align-center;
			margin-top: 12rpx;
			
			image{
				width: 35rpx;
				height: 35rpx;
			}
			text{
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #000000;
				margin-left: 12rpx;
			}
		}
	}
	.active{
		background: #DAD0FF;
		border: 2rpx solid #5E36F4;
	}
}
.warp {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.rect {
	width: 500rpx;
	height: 330rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	padding: 40rpx;
	box-sizing: border-box;
	margin-top: -100rpx;
	
	.rect_title{
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
		line-height: 50rpx;
		@include center;
		margin-bottom: 30rpx;
	}
	.rect_bot{
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		line-height: 50rpx;
		@include center;
		margin-top: 30rpx;
		
		text{
			color: $main_color;
		}
	}
}
</style>
